<!--
 * @Author: wwssaabb
 * @Date: 2021-09-13 11:23:55
 * @LastEditTime: 2021-09-15 17:02:10
 * @FilePath: \gshop-client\src\views\Shop\components\Menu.vue
-->
<!-- 
  shop点餐功能组件路由，path：/shop/menu
 -->
<template>
  <div class="menu-content">
    <Sidebar
      v-model="chooseSidebarIndex"
      class="shop-content-sidebar"
      id="s_container"
    >
      <SidebarItem
        :title="item.name"
        v-for="(item, index) in orderList"
        :key="item.id"
        :id="'s_' + item.id.toString()"
        @click="scrollTo(index)"
      ></SidebarItem>
    </Sidebar>
    <div class="orders-list" @scroll="ordersListsScroll" id="t_container">
      <div
        v-for="(order, index) in orderList"
        :key="order.id"
        class="orders-item"
        :id="'t_' + order.id.toString()"
      >
        <div class="orders-title">
          {{ order.name }}
        </div>
        <div class="goods-list">
          <div
            v-for="(good, _index) in order.goods"
            :key="good.id"
            class="goods-item"
          >
            <img
              :src="good.picture"
              alt=""
              @click="popupShow('goods', [index, _index], 'center')"
            />
            <div class="right">
              <div
                class="name"
                @click="popupShow('goods', [index, _index], 'center')"
              >
                <span>{{ good.name }}</span>
              </div>
              <div
                class="desc"
                v-if="good.type !== ''"
                @click="popupShow('goods', [index, _index], 'center')"
              >
                <span v-if="good.type !== ''">{{ good.type }}</span>
              </div>
              <div class="sales_feedback">
                <span>月售{{ good.month_sales }}份</span
                ><span>好评率{{ good.feedback }}%</span>
              </div>
              <div class="price_stepper">
                <span
                  @click="
                    popupShow(
                      'goods',
                      [index, _index],
                      'center',
                      undefined,
                      false,
                      false
                    )
                  "
                  >￥{{ good.price }}</span
                ><span
                  ><Stepper
                    v-model="good.count"
                    theme="round"
                    button-size="20"
                    disable-input
                    min="0"
                    @plus="addGoods(good)"
                    @minus="delGoods(good)"
                /></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Divider>底部</Divider>
    </div>
  </div>
  <Popup
    :isShow="popupShowInfo.status"
    :position="popupShowInfo.position"
    :popupClose="popupClose"
    :teleport="popupShowInfo.teleport"
    :round="popupShowInfo.round"
    :closeable="popupShowInfo.closeable"
  >
    <div class="goods-info-wrap" v-if="popupShowInfo.type === 'goods'">
      <div class="goods-img">
        <img v-lazy="chooseGoods?.picture" alt="" />
        <div v-if="chooseGoods?.desc !== ''" class="desc">
          {{ chooseGoods?.desc }}
        </div>
      </div>
      <div class="message">
        <div class="name">
          <span>{{ chooseGoods?.name }}</span>
        </div>
        <div class="sales_feedback">
          <span>月售{{ chooseGoods?.month_sales }}份</span
          ><span>好评率{{ chooseGoods?.feedback }}%</span>
        </div>
        <div class="price_stepper">
          <span>￥{{ chooseGoods?.price }}</span
          ><span span v-if="chooseGoods"
            ><Stepper
              v-model="chooseGoods.count"
              theme="round"
              button-size="24"
              disable-input
              min="0"
              @plus="addGoods(chooseGoods)"
              @minus="delGoods(chooseGoods)"
            />
          </span>
        </div>
      </div>
    </div>
    <div class="car_list-wrap" v-else>
      <div class="title">购物车<span @click="clearCarList">清空</span></div>
      <div class="list">
        <div class="item" v-for="item in shop_car.list" :key="item.id">
          <span>{{ item.name }}</span>
          <span
            ><span class="price">￥{{ item.price }}</span
            ><Stepper
              v-model="item.count"
              theme="round"
              button-size="20"
              disable-input
              min="0"
              @plus="addGoods(item)"
              @minus="delGoods(item)"
          /></span>
        </div>
      </div>
      <div id="menu-car-list-subminbar">
        <SubmitBar
          :count="shop_car.count"
          :carTotal="carTotal"
          :limit_condition="20"
          :popupShow="popupShow"
          :isLogined="isLogined"
          :LoginDialog="LoginDialog"
        ></SubmitBar>
      </div>
    </div>
  </Popup>
  <SubmitBar
    :count="shop_car.count"
    :carTotal="carTotal"
    :limit_condition="20"
    :popupShow="popupShow"
    :isLogined="isLogined"
    :LoginDialog="LoginDialog"
  ></SubmitBar>
</template>

<script setup lang="ts">
import Popup from "../../../components/MyPopup.vue";
import SubmitBar from "./SubmitBar.vue";
import { ref, onMounted, watch, computed } from "vue";
import { Sidebar, SidebarItem, Stepper, Divider, Dialog } from "vant";
import router from "../../../router";

type PopupPosition = "top" | "left" | "bottom" | "right" | "center" | undefined;
const popupClose = () => (popupShowInfo.value.status = false);

//点餐相关代码
type GoodsType = {
  id: string;
  name: string;
  month_sales: number;
  feedback: number;
  price: number;
  count: number;
  picture: string;
  type?: string;
  desc?: string;
  old_price?: number;
};
type OrderType = {
  id: number;
  name: string;
  goods: GoodsType[];
};
let chooseGoods = ref<GoodsType>();
let chooseSidebarIndex = ref(0);
const orderList: OrderType[] = [
  {
    id: 1,
    name: "优惠",
    goods: [
      {
        id: "JH_1",
        name: "南瓜粥",
        desc: "主、辅料:水、大米、南瓜、冰糖等",
        month_sales: 1860,
        feedback: 100,
        price: 9,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114",
        type: "甜粥",
      },
      {
        id: "JH_2",
        name: "红豆薏米美肤粥",
        desc: "美肤粥对皮肤有很好的保养作用",
        month_sales: 1960,
        feedback: 100,
        price: 12,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114",
        type: "甜粥",
      },
      {
        id: "JH_3",
        name: "八宝酱菜",
        desc: "道菜能吃出八种宝贝，酱香中透着清香，还有淡淡的甜味和辣味，口感多样，是下饭的好菜",
        month_sales: 1186,
        feedback: 98,
        price: 5,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
      {
        id: "JH_4",
        name: "扁豆焖面",
        desc: "",
        month_sales: 996,
        feedback: 99,
        price: 14,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
      {
        id: "JH_5",
        name: "葱花饼",
        desc: "",
        month_sales: 1678,
        feedback: 95,
        price: 10,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
      {
        id: "JH_6",
        name: "牛肉馅饼",
        desc: "",
        month_sales: 1436,
        feedback: 93,
        price: 19,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
      {
        id: "JH_7",
        name: "招牌猪肉白菜锅贴/10个",
        desc: "",
        month_sales: 1578,
        feedback: 95,
        price: 20,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
    ],
  },
  {
    id: 2,
    name: "折扣",
    goods: [
      {
        id: "JH_8",
        name: "娃娃菜炖豆腐",
        desc: "",
        month_sales: 1816,
        feedback: 93,
        price: 19,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
      {
        id: "JH_9",
        name: "手撕包菜",
        desc: "",
        month_sales: 1916,
        feedback: 96,
        price: 16,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
      {
        id: "JH_10",
        name: "香酥黄金鱼/3条",
        desc: "",
        month_sales: 1531,
        feedback: 91,
        price: 13,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
    ],
  },
  {
    id: 3,
    name: "香浓咸粥",
    goods: [
      {
        id: "JH_11",
        name: "红枣山药糙米粥",
        desc: "红枣山药糙米粥,素材包,爽口莴笋丝,四川泡菜或八宝酱菜,配菜可备注",
        month_sales: 1336,
        feedback: 95,
        price: 10,
        old_price: 14,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
      {
        id: "JH_12",
        name: "红豆粥",
        desc: "",
        month_sales: 1566,
        feedback: 97,
        price: 14,
        old_price: 18,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
      {
        id: "JH_13",
        name: "糊塌子",
        desc: "",
        month_sales: 1286,
        feedback: 91,
        price: 10,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
    ],
  },
  {
    id: 4,
    name: "营养咸粥",
    goods: [
      {
        id: "JH_14",
        name: "田园蔬菜粥",
        desc: "",
        month_sales: 1896,
        feedback: 99,
        price: 12,
        count: 0,
        picture:
          "https://fuss10.elemecdn.com/5/7b/0af500733bb676d2a0a329ef1a078jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
        type: "",
      },
    ],
  },
  {
    id: 5,
    name: "爽口凉菜",
    goods: [
      {
        id: "JH_15",
        name: "拍黄瓜",
        desc: "",
        month_sales: 1679,
        feedback: 96,
        price: 9,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/6/54/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
      {
        id: "JH_3",
        name: "八宝酱菜",
        desc: "道菜能吃出八种宝贝，酱香中透着清香，还有淡淡的甜味和辣味，口感多样，是下饭的好菜",
        month_sales: 1186,
        feedback: 98,
        price: 5,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
    ],
  },
  {
    id: 6,
    name: "精选套餐",
    goods: [
      {
        id: "JH_16",
        name: "红豆薏米粥套餐",
        desc: "",
        month_sales: 1699,
        feedback: 96,
        price: 39,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
      {
        id: "JH_17",
        name: "皮蛋瘦肉粥套餐",
        desc: "",
        month_sales: 1831,
        feedback: 97,
        price: 35,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
    ],
  },
  {
    id: 7,
    name: "果拼果汁",
    goods: [
      {
        id: "JH_18",
        name: "蜜瓜圣女萝莉杯",
        desc: "",
        month_sales: 586,
        feedback: 86,
        price: 9,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
      {
        id: "JH_19",
        name: "加多宝",
        desc: "",
        month_sales: 679,
        feedback: 90,
        price: 6,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
      {
        id: "JH_20",
        name: "VC无限橙果汁",
        desc: "",
        month_sales: 433,
        feedback: 78,
        price: 8,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
    ],
  },
  {
    id: 8,
    name: "小吃主食",
    goods: [
      {
        id: "JH_4",
        name: "扁豆焖面",
        desc: "",
        month_sales: 996,
        feedback: 99,
        price: 14,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
      {
        id: "JH_5",
        name: "葱花饼",
        desc: "",
        month_sales: 1678,
        feedback: 95,
        price: 10,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
      {
        id: "JH_6",
        name: "牛肉馅饼",
        desc: "",
        month_sales: 1436,
        feedback: 93,
        price: 19,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
      {
        id: "JH_7",
        name: "招牌猪肉白菜锅贴/10个",
        desc: "",
        month_sales: 1578,
        feedback: 95,
        price: 20,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
      {
        id: "JH_13",
        name: "糊塌子",
        desc: "",
        month_sales: 1286,
        feedback: 91,
        price: 10,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
    ],
  },
  {
    id: 9,
    name: "特色粥品",
    goods: [
      {
        id: "JH_21",
        name: "皮蛋瘦肉粥",
        desc: "",
        month_sales: 1766,
        feedback: 98,
        price: 12,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
      {
        id: "JH_1",
        name: "南瓜粥",
        desc: "主、辅料:水、大米、南瓜、冰糖等",
        month_sales: 1860,
        feedback: 100,
        price: 9,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114",
        type: "甜粥",
      },
      {
        id: "JH_2",
        name: "红豆薏米美肤粥",
        desc: "美肤粥对皮肤有很好的保养作用",
        month_sales: 1960,
        feedback: 100,
        price: 12,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114",
        type: "甜粥",
      },
      {
        id: "JH_11",
        name: "红枣山药糙米粥",
        desc: "红枣山药糙米粥,素材包,爽口莴笋丝,四川泡菜或八宝酱菜,配菜可备注",
        month_sales: 1336,
        feedback: 95,
        price: 10,
        old_price: 14,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
      {
        id: "JH_22",
        name: "鲜蔬菌菇粥",
        desc: "",
        month_sales: 1436,
        feedback: 96,
        price: 12,
        count: 0,
        picture:
          "http://fuss10.elemecdn.com/e/a3/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/114/h/114",
        type: "",
      },
      {
        id: "JH_14",
        name: "田园蔬菜粥",
        desc: "",
        month_sales: 1896,
        feedback: 99,
        price: 12,
        count: 0,
        picture:
          "https://fuss10.elemecdn.com/5/7b/0af500733bb676d2a0a329ef1a078jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/",
        type: "",
      },
    ],
  },
];

//获取菜单分块的位置信息
type OrderOptionInfoType =
  | {
      top: number;
      bottom: number;
      y: number;
      height: number;
    }
  | undefined;
let orderOptionInfo: OrderOptionInfoType[];
let start: number | undefined = 0;
onMounted(() => {
  setTimeout(() => {
    orderOptionInfo = orderList.reduce<OrderOptionInfoType[]>(
      (
        p: OrderOptionInfoType[],
        c: OrderType,
        index: number
      ): OrderOptionInfoType[] => {
        let targetBoundingClientRect = document
          .querySelector("#t_" + c.id)
          ?.getBoundingClientRect();
        let obj: OrderOptionInfoType = {
          top: targetBoundingClientRect ? targetBoundingClientRect.top : 0,
          bottom: targetBoundingClientRect
            ? targetBoundingClientRect.bottom
            : 0,
          y: targetBoundingClientRect ? targetBoundingClientRect.y : 0,
          height: targetBoundingClientRect
            ? targetBoundingClientRect.height
            : 0,
        };
        if (index === 0) start = targetBoundingClientRect?.top;
        p.push(obj);
        return p;
      },
      [] as OrderOptionInfoType[]
    );
  }, 100);
});
const stickyStatusChange = (isFixed: boolean, index: number): void => {};
//点击sidebar时的跳转事件
const scrollTo = (index: number): void => {
  let scrollTop = orderOptionInfo[index]?.top;
  let start = orderOptionInfo[0] ? orderOptionInfo[0].top : 0;
  document
    .querySelector("#t_container")
    ?.scrollTo(0, scrollTop ? scrollTop - start + 1 : 0);
};
//点餐列表的滚动监听事件
const ordersListsScroll = (e: UIEvent) => {
  let ele = document.querySelector("#t_1");
  const y = ele ? ele.getBoundingClientRect().y : 0;
  let start = orderOptionInfo[0] ? orderOptionInfo[0].top : 0;
  //以第一个菜单块的滚动为基准
  let current_y = start + start - y;
  chooseSidebarIndex.value = orderOptionInfo.findIndex(
    (item: OrderOptionInfoType, index: number): number | boolean | undefined =>
      start &&
      item !== undefined &&
      item.bottom >= current_y &&
      item.top <= current_y
  );
};
type popupShowType = "goods" | "car_list";

const popupShowInfo = ref<{
  type: popupShowType;
  status: boolean;
  position: PopupPosition;
  teleport?: string;
  round?: boolean;
  closeable?: boolean;
}>({
  type: "goods",
  status: false,
  position: "center",
  teleport: "#app",
});
const popupShow = (
  type: popupShowType = "goods",
  indexs?: [number, number],
  position?: PopupPosition,
  teleport?: string,
  round?: boolean,
  closeable?: boolean
): void => {
  if (type === "goods") {
    if (!indexs) return;
    popupShowInfo.value.type = "goods";
    chooseGoods.value = orderList[indexs[0]].goods[indexs[1]];
  } else {
    popupShowInfo.value.type = "car_list";
    if (shop_car.value.count === 0) return;
  }
  if (position) popupShowInfo.value.position = position;
  if (teleport) popupShowInfo.value.teleport = teleport;
  if (round !== undefined) popupShowInfo.value.round = round;
  if (closeable !== undefined) popupShowInfo.value.closeable = closeable;
  popupShowInfo.value.status = !popupShowInfo.value.status;
};
watch(chooseSidebarIndex, (newVal: number): void => {
  document.querySelector("#s_container")?.scrollTo(0, newVal * 60);
});

//购物车相关代码
const shop_car = ref<{ list: GoodsType[]; count: number }>({
  list: [],
  count: 0,
});
//清空购物车
const clearCarList = () =>
  Dialog.confirm({
    title: "提示",
    message: "确定清空购物车吗？",
    confirmButtonColor: "#02a774",
  })
    .then(() => {
      shop_car.value.list.forEach((i) => (i.count = 0));
      shop_car.value.list = [];
      shop_car.value.count = 0;
      popupShowInfo.value.status = false;
    })
    .catch(() => {});

//stepper相关
const addGoods = (goods: GoodsType | undefined) => {
  if (!goods) return;
  //在购物车新增商品
  let targetIndex = shop_car.value.list.findIndex((i) => i.id === goods.id);
  if (targetIndex !== -1) {
    shop_car.value.list[targetIndex].count++;
  } else {
    shop_car.value.list.push(goods);
  }
  shop_car.value.count++;
};
const delGoods = (goods: GoodsType | undefined) => {
  if (!goods) return;
  //在购物车减少商品购买数量
  let targetIndex = shop_car.value.list.findIndex((i) => i.id === goods.id);
  if (targetIndex !== -1) {
    shop_car.value.list[targetIndex].count--;
    shop_car.value.count--;
  }
};
const carTotal = computed((): number => {
  if (shop_car.value.list.length === 0) return 0;
  return shop_car.value.list.reduce((p, c): number => p + c.count * c.price, 0);
});

//登录检查
const isLogined = () => false;

//提示登录
const LoginDialog = () =>
  Dialog.confirm({
    title: "登录提示",
    message: "需要进行登录才能结算，是否前往登录？",
    confirmButtonColor: "#02a774",
  })
    .then(() => router.push("/login"))
    .catch(() => {});
</script>

<style lang="scss" scoped>
.menu-content {
  display: flex;
  ::-webkit-scrollbar {
    display: none;
  }

  .shop-content-sidebar {
    display: inline-block;
    height: calc(100vh - 281px);
    width: 80px;
  }
  .orders-list {
    flex: 1;
    width: calc(100vw - 80px);
    height: calc(100vh - 281px);
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    :deep(.van-sticky) {
      padding: 10px;
      background-color: #f3f5f7;
      color: #888;
    }

    .orders-item {
      .orders-title {
        padding: 10px;
        background-color: #f8f8f8;
        color: #888;
      }
      .goods-list {
        display: flex;
        flex-direction: column;

        .goods-item {
          padding: 15px 10px;
          display: flex;
          align-items: center;
          &:not(:last-child) {
            border-bottom: 1px solid #eee;
          }

          img {
            width: 15vw;
            height: 15vw;
            border-radius: 5px;
            margin-right: 10px;
          }

          .right {
            width: calc(85vw - 110px);
            color: #888;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .name {
              color: #333;
              margin-bottom: 5px;
              span {
                font-weight: bold;
              }
            }
            .desc {
              margin-bottom: 5px;
              span {
                display: -webkit-box;
                width: calc(85vw - 110px);
                font-size: 12px;
                line-height: 15px;
                font-family: "Microsoft YaHei";
                max-height: 38px;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
              }
            }

            .sales_feedback {
              margin-bottom: 5px;
              span {
                font-size: 12px;
                margin-right: 10px;
              }
            }
            .price_stepper {
              display: flex;
              justify-content: space-between;
              align-items: center;

              span {
                &:first-child {
                  font-weight: bold;
                  font-size: 16px;
                  font-family: "Microsoft YaHei";
                  color: #f01414;
                }
                &:last-child {
                  z-index: 50;
                }
              }
            }
          }
        }
      }
    }
  }
}

.goods-info-wrap {
  width: 80vw;
  .goods-img {
    position: relative;
    width: 100%;

    img {
      width: 100%;
      object-fit: cover;
    }
    .desc {
      width: 100%;
      font-size: 11px;
      color: #fff;
      position: absolute;
      left: 0;
      bottom: 5px;
      padding: 5px;
      background-color: rgba(0, 0, 0, 0.3);
    }
  }

  .message {
    padding: 10px 20px;
    .name {
      color: #333;
      margin-bottom: 10px;
      span {
        font-weight: bold;
        font-size: 16px;
        font-family: "Microsoft YaHei";
      }
    }
    .sales_feedback {
      color: #888;
      margin-bottom: 10px;
      span {
        margin-right: 10px;
        font-size: 12px;
        font-family: "Microsoft YaHei";
      }
    }
    .price_stepper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        &:first-child {
          font-weight: bold;
          font-size: 16px;
          font-family: "Microsoft YaHei";
          color: #f01414;
        }
      }
    }
  }
}

.car_list-wrap {
  width: 100vw;
  padding-bottom: 50px;

  .title {
    font-weight: bold;
    font-size: 16px;
    font-family: "Microsoft YaHei";
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px;
    color: #000;
    background-color: #f3f5f7;
    span {
      font-size: 12px;
      color: #02a774;
    }
  }

  .list {
    max-height: 50vh;
    padding-bottom: 20px;
    overflow-y: auto;
    .item {
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;

      span {
        color: #333;
        &.price {
          color: #f01414;
          margin-right: 10px;
        }
      }
    }
  }

  #menu-car-list-subminbar {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 50px;
    background-color: #fff;
  }
}

:deep(.van-stepper__plus) {
  background-color: #02a774;
}
:deep(.van-stepper__minus) {
  color: #02a774;
  border-color: #02a774;
}
</style>
